<script setup>
import {
  HomeFilled,
  Guide,
  List,
  Tickets,
  Avatar,
  User,
  Van,
  TrendCharts,
  Tools,
  Opportunity,
  Promotion,
  UserFilled,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Minus
} from "@element-plus/icons-vue";
import avatar from "@/assets/default.png";

import {userInfoService} from '@/api/admin.js'
import useUserInfoStore from '@/stores/userInfo.js'
import {userTokenStore} from '@/stores/token.js'
const tokenStore = userTokenStore();
const userInfoStore = useUserInfoStore();
//调用函数，获取用户详细信息
const getUserInfo = async()=>{
  //调用接口
  let result = await userInfoService();
  //数据存储到pinia中
  userInfoStore.setInfo(result.data);
}
getUserInfo();
//条目被点击后，调用的函数
import {useRouter} from 'vue-router'
const router = useRouter();
import {ElMessage,ElMessageBox} from 'element-plus'
const handleCommand = (command) =>{
  //判断指令
  if(command === 'logout'){
    //退出登录
    ElMessageBox.confirm(
      '您确定要退出吗？',
      '温馨提示',
      {
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        type:'warning',
      }
    )
    .then(async()=>{
      //退出登录
      //1.清空pinia中存储的token以及个人信息
      tokenStore.removeToken()
      userInfoStore.removeToken()
      //2.跳转到登录页面
      router.push('/login')
      ElMessage({
        type:'success',
        message:'退出登录'
      })
    })
  }
  else{
    //路由
    router.push('/user/'+command)
  }
}
</script>

<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
        active-text-color="black"
        background-color="#4a5a65"
        text-color="#fff"
        :default-opened="[
          'RouteStation-module',
          'Order-module',
          'ParentStudent-module',
          'DriverCar-module',
          'settings-module',
          'User-module'
        ]"
        router
      >
        <el-menu-item index="/home"><!-- 系统首页 -->
          <el-icon><HomeFilled /></el-icon>
          <span>系统首页</span>
        </el-menu-item>

        <el-sub-menu index="RouteStation-module"><!-- 路线站点 -->
          <template #title>
            <el-icon><Guide /></el-icon>
            <span>线路站点</span>
          </template>
          <el-menu-item index="/routeStation/station">
            <el-icon><Minus /></el-icon>
            <span>站点管理</span>
          </el-menu-item>
          <el-menu-item index="/routeStation/route">
            <el-icon>
              <Minus />
            </el-icon>
            <span>线路管理</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="Order-module"><!-- 接送订单 -->
          <template #title>
            <el-icon><Tickets /></el-icon>
            <span>接送订单</span>
          </template>
          <el-menu-item index="/Order/des">
            <el-icon>
              <Minus />
            </el-icon>
            <span>订单概述</span>
          </el-menu-item>
          <el-menu-item index="/Order/list">
            <el-icon>
              <Minus />
            </el-icon>
            <span>订单列表</span>
          </el-menu-item>
<!--           <el-menu-item index="/Order/allocation">待开发
            <el-icon>
              <Minus />
            </el-icon>
            <span>分配订单</span>
          </el-menu-item> -->
        </el-sub-menu>

        <el-sub-menu index="ParentStudent-module"><!-- 家长学生 -->
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>家长学生</span>
          </template>
          <el-menu-item index="/parentStudent/parent">
            <el-icon>
              <Minus />
            </el-icon>
            <span>家长管理</span>
          </el-menu-item>
          <el-menu-item index="/parentStudent/student">
            <el-icon>
              <Minus />
            </el-icon>
            <span>学生管理</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="DriverCar-module"><!-- 司机车辆 -->
          <template #title>
            <el-icon><Van /></el-icon>
            <span>司机车辆</span>
          </template>
          <el-menu-item index="/driverCar/driver">
            <el-icon>
              <Minus />
            </el-icon>
            <span>司机管理</span>
          </el-menu-item>
          <el-menu-item index="/driverCar/car">
            <el-icon>
              <Minus />
            </el-icon>
            <span>车辆管理</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- <el-sub-menu>财务统计（待开发）
          <template #title>
            <el-icon><TrendCharts /></el-icon>
            <span>财务统计</span>
          </template>
          <el-menu-item>
            <el-icon>
              <Minus />
            </el-icon>
            <span>财务概览</span>
          </el-menu-item>
        </el-sub-menu> -->

        <el-sub-menu index="settings-module"><!-- 系统设置 -->
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/setting/announcementQuestion">
            <el-icon>
              <Minus />
            </el-icon>
            <span>公告&问题</span>
          </el-menu-item>
          <el-menu-item index="/setting/feedback">
            <el-icon>
              <Minus />
            </el-icon>
            <span>意见反馈</span>
          </el-menu-item>
          <el-menu-item index="/setting/admin">
            <el-icon>
              <Minus />
            </el-icon>
            <span>管理员</span>
          </el-menu-item>
<!--           <el-menu-item index="/setting/adminManage">
            <el-icon>
              <Minus />
            </el-icon>
            <span>角色管理</span>
          </el-menu-item> -->
          <el-menu-item index="/setting/log">
            <el-icon>
              <Minus />
            </el-icon>
            <span>管理日志</span>
          </el-menu-item>
<!--           <el-menu-item index="/setting/SMStemplate">
            <el-icon>
              <Minus />
            </el-icon>
            <span>短信模版</span>
          </el-menu-item> -->
          <el-menu-item index="/setting/SMStemplate">
            <el-icon>
              <Minus />
            </el-icon>
            <span>注册协议</span>
          </el-menu-item>
          <!-- <el-menu-item index="/setting/backdrop">（待开发）
            <el-icon>
              <Minus />
            </el-icon>
            <span>背景管理</span>
          </el-menu-item> -->
          <el-menu-item index="/setting/aboutUs">
            <el-icon>
              <Minus />
            </el-icon>
            <span>关于我们</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- <el-sub-menu>运营管理（待开发）
          <template #title>
            <el-icon><Opportunity /></el-icon>
            <span>运营管理</span>
          </template>
          <el-menu-item>
            <el-icon>
              <Minus />
            </el-icon>
            <span>价格设置</span>
          </el-menu-item>
          <el-menu-item>
            <el-icon>
              <Minus />
            </el-icon>
            <span>运营日历</span>
          </el-menu-item>
          <el-menu-item>
            <el-icon>
              <Minus />
            </el-icon>
            <span>搜索记录</span>
          </el-menu-item>
        </el-sub-menu> -->

        <el-sub-menu index="User-module"><!-- 个人中心 -->
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/user/info">
            <el-icon>
              <User />
            </el-icon>
            <span>基本资料</span>
          </el-menu-item>
<!--           <el-menu-item index="/user/avatar">
            <el-icon>
              <Crop />
            </el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/resetPassword">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>重置密码</span>
          </el-menu-item> -->
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div>绿洲安全行管理员：<strong>{{ userInfoStore.info.username }}</strong></div>
        <!-- 下拉菜单 -->
        <!-- command：条目被点击后会触发，在事件函数上可以声明一个参数，接收条目对应的指令 -->
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <span class="el-dropdown__box">
            <el-avatar :src="avatar" />
            <el-icon>
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="avatar" :icon="Crop"
                >更换头像</el-dropdown-item
              >
              <el-dropdown-item command="resetPassword" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- 中间区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
      <!-- 底部区域 -->
      <el-footer>绿洲安全行 ©2024 Created by start-eternity</el-footer>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #4a5a65;

    &__logo {
      height: 120px;
      background: url("@/assets/logo.png") no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>